﻿@{
    ViewBag.Title = "Quotation Maintenance";
    ViewBag.Header = "Purchase Order";
    ViewBag.BackUrl = Url.Action("Index", "Quotation");
    LineFocus.Nikcron.Models.Lookup Retailers = ViewBag.Retailers;
    LineFocus.Nikcron.Models.Lookup Stockhouses = ViewBag.Stockhouses;
    LineFocus.Nikcron.Models.Lookup Brands = ViewBag.Brands;
    LineFocus.Nikcron.Models.Lookup Models = ViewBag.Models;
}

@model Nickron.Database.Company

@using (Html.BeginForm("Maintenance", "Quotation", FormMethod.Post, new { onsubmit = "return ValidateForm();" }))
{
    <div class="col-md-12">

        <div class="box box-danger">
            <div class="box-body">
                <div class="form-group">
                    <label>Quote Date:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <input type="text" id="QuoteDate" name="QuoteDate" class="form-control bfh-datepicker" value="@DateTime.Today.ToShortDateString()" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->
                <div class="form-group">
                    <label>Quote To Stockhouse:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i></i>
                        </div>
                        <select id="Stockhouse" name="Stockhouse" class="selectpicker">
                            @Html.Partial("Dropdown", Stockhouses)
                        </select>
                    </div><!-- /.input group -->
                </div><!-- /.form group -->
                <div class="form-group">
                    <label> Quoted By the Retailer:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i></i>
                        </div>
                        <select id="Retailer" name="Retailer" class="selectpicker" data-hide-disabled="true">
                            @Html.Partial("Dropdown", Retailers)
                        </select>
                    </div><!-- /.input group -->
                </div><!-- /.form group -->
                
            </div><!-- /.box-body -->
        </div><!-- /.box -->
        
       <div class="box">
            <div class="box-header">
                <h3 class="box-title">Add Products</h3>
            </div>
            <div class="box-body table-responsive">
                            <div class="form-group">
                                <label> Brand:</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class=""></i>
                                    </div>
                                    <select id="Manufacture" name="Manufacture" class="selectpicker">
                                        @Html.Partial("Dropdown", Brands)
                                    </select>
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            <div class="form-group">
                                <label> Model#:</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class=""></i>
                                    </div>
                                    <select id="Model" name="Model" class="selectpicker" data-hide-disabled="true">
                                        @Html.Partial("Dropdown", Models)
                                    </select>
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            <div class="form-group">
                                <label> Unit Price:</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class=""></i>
                                    </div>
                                    <input id="UnitPrice" name="UnitPrice" type="number" maxlength="100" class="form-control pull-right" />
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->

                            <div class="form-group">
                                <label> Qty:</label><span class="astrisk">*</span>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class=""></i>
                                    </div>
                                    <input id="Qty" name="Qty" class="form-control" />
                                </div><!-- /.input group -->
                            </div><!-- /.form group -->
                            <div class="box-footer">
                                <button type="button" onclick="AddProduct()" class="btn btn-primary" style=" width:80px;">Add</button>
                            </div>
                            <table id="dt_Grid" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Product</th>
                                        <th>Unit Price</th>
                                        <th>Qty</th>
                                        <th>Line Total</th>
                                        <th>&nbsp;</th>
                                    </tr>
                                </thead>
                                <tbody id="dt_Rows">
                                </tbody>
                                <tfoot id="dt_Footer">
                                </tfoot>
                            </table>
                        </div><!-- /.box-body -->
        </div><!-- /.box -->
                
       <div class="box box-success">
                    <div class="box-footer">
                        <input type="hidden" name="Id" id="Id" value="@ViewBag.Id" />
                        <button type="submit" class="btn btn-primary" style=" width:80px;">Save</button>
                        <button type="reset" class="btn btn-primary" style=" width:80px;">Cancel</button>
                    </div>
                </div>
            
</div><!-- /.col (left) -->
    <input type="hidden" id="ModelNos" name="ModelNos" />
    <input type="hidden" id="Qtys" name="Qtys" />
    <input type="hidden" id="UnitPrices" name="UnitPrices" />
}

<script id="dataTable_Grid" type="text/x-jquery-tmpl">
    <tr>
        <td>${Product}</td>
        <td>${UnitPrice}</td>
        <td>${Qty}</td>
        <td>${LineTotal}</td>
        <td><a onclick="DeleteProduct(${ModelId})">Delete</a></td>
    </tr>
</script>

<script type="text/javascript">

    var results = [];
    var table;

    $('#Model').change(function () {
        var url = '@Url.Action("GetPriceDetailsByModelId", "Product")?ModelId=';
        url += $('#Model').val();
        $.getJSON(url, function (result) {
            $('#UnitPrice').val(result);
        });
    })

    $('#Manufacture').change(function () {
        $('.Manufacture').removeAttr("disabled");
        $('.Manufacture').prop("disabled", "true");
        $('.Manufacture_' + $('#Manufacture').val()).removeAttr("disabled");
        $('#Model').removeAttr("disabled");
        $('#Model').selectpicker('deselectAll');
        $('#Model').selectpicker("render");
        $('#Model').selectpicker("refresh");
        $('#Model')[0].selectedIndex = -1;
        $('*[data-id="Model"]').prop("title", "");
        $('*[data-id="Model"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');
    });

    $('#Stockhouse').change(function () {
        $('.Stockhouse').removeAttr("disabled");
        $('.Stockhouse').prop("disabled", "true");
        $('.Stockhouse_' + $('#Stockhouse').val()).removeAttr("disabled");
        $('#Retailer').removeAttr("disabled");
        $('#Retailer').selectpicker('deselectAll');
        $('#Retailer').selectpicker("render");
        $('#Retailer').selectpicker("refresh");
        $('#Retailer')[0].selectedIndex = -1;
        $('*[data-id="Retailer"]').prop("title", "");
        $('*[data-id="Retailer"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');
    });

    $(document).ready(function () {
        $('.selectpicker').selectpicker();
        $('#QuoteDate').datepicker();

        $('#Stockhouse')[0].selectedIndex = -1;
        $('*[data-id="Stockhouse"]').prop("title", "");
        $('*[data-id="Stockhouse"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');

        $('#Retailer')[0].selectedIndex = -1;
        $('*[data-id="Retailer"]').prop("title", "");
        $('*[data-id="Retailer"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');

        $('#Manufacture')[0].selectedIndex = -1;
        $('*[data-id="Manufacture"]').prop("title", "");
        $('*[data-id="Manufacture"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');

        $('#Model')[0].selectedIndex = -1;
        $('*[data-id="Model"]').prop("title", "");
        $('*[data-id="Model"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');
    });

    function ValidateForm() {
        RequiredDropdown("Stockhouse", -1, "Select a Stockhouse");
        RequiredDropdown("Retailer", -1, "Select a Retailer");
        RequiredTextbox("QuoteDate", "Enter Quote Date");
        if(results.length <= 0)
            AddErrorMsg("Add at least one Product")
        else
        {
            var models = "";
            var qtys = "";
            var unitPrices = "";
            for(var i=0;i<results.length;i++)
            {
                if(i!=0)
                {
                    models += ",";
                    qtys += ",";
                    unitPrices += ",";
                }
                models += results[i].ModelId;
                qtys += results[i].Qty;
                unitPrices += results[i].UnitPrice;
            }
            $('#ModelNos').val(models);
            $('#Qtys').val(qtys);
            $('#UnitPrices').val(unitPrices);
        }
        return AlertError();
    }

    function AddProduct() {
        var formDT = false;
        if(results.length == 0)
        {
            formDT = true;
            
        }
        RequiredDropdown("Manufacture", -1, "Select a Brand");
        RequiredDropdown("Model", -1, "Select a Model#");
        RequiredTextbox("Qty", "Enter Qty");
        if(AlertError())
        {
            var record = new Object();
            record.ModelId = $('#Model').val();
            record.UnitPrice = parseFloat($('#UnitPrice').val());
            record.Product = $("#Manufacture option:selected").text() + "(" + $("#Model option:selected").text() + ")";
            record.Qty = parseInt($('#Qty').val());
            record.LineTotal = record.UnitPrice * record.Qty;
            results.push(record);

            if(formDT)
            {
                $('#dt_Rows').html('');
                $.tmpl($('#dataTable_Grid'), results).appendTo('#dt_Rows');
                $('#dt_Grid').dataTable({
                    "bPaginate": false,
                    "bLengthChange": true,
                    "bFilter": false,
                    "bSort": false,
                    "bInfo": false,
                    "bAutoWidth": false
                });
            }
            else
            {
                $('#dt_Rows').html('');
                var tb = $('#dt_Grid').dataTable();
                tb._fnReDraw();
                $.tmpl($('#dataTable_Grid'), results).appendTo('#dt_Rows');
            }
        }
    }

    function DeleteProduct(ModelId){
        for(var i=0;i<results.length;i++){
            if(results[i].ModelId == ModelId)
            {
                results.splice(i,1);
            }
        }
        $('#dt_Rows').html('');
        var tb = $('#dt_Grid').dataTable();
        tb._fnReDraw();
        $.tmpl($('#dataTable_Grid'), results).appendTo('#dt_Rows');
        return false;
    }
</script>